import './tab.css'
var Tab = {
    name: 'Tab',
    template: '<div class="my-tabs">' +
        '    <div class="my-head" ref="head">' +
        '      <button class="my-tab" v-for="(item,index) in headers" :key="index" :data-index="index"' +
        '              :class="{active:(index===tabsStatus.currIndex)}"' +
        '              @click="tabClick(index)">' +
        '        {{item}}' +
        '      </button>' +
        '    </div>' +
        '    <div class="my-contents" ref="contents">' +
        '      <div class="my-content" v-for="(item,index) in headers" :key="index" :data-index="index"' +
        '           :class="{active:(index===tabsStatus.currIndex)}" v-if="(index===tabsStatus.currIndex)">' +
        '        <slot :name="index"/>' +
        '      </div>' +
        '    </div>' +
        '  </div>',
    props: {
        headers: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data: function () {
        return {
            tabsStatus: {
                currIndex: 0
            }
        }
    },
    methods: {
        tabClick: function (currIndex) {
            const self = this
            // for (let i = 0; i < self.$refs.head.children.length; i++) {
            //   self.$refs.head.children[i].classList.remove('active')
            // }
            // for (let i = 0; i < self.$refs.contents.children.length; i++) {
            //   self.$refs.contents.children[i].classList.remove('active')
            // }
            // e.target.classList.add('active')
            // self.$refs.contents.children[index].classList.add('active')
            self.tabsStatus.currIndex = currIndex
            self.$emit('tabClicked', currIndex)
        }
    }
}